<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    <input type="text" class="input" placeholder="请输入姓名，回车查询">

    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        var ipt = document.querySelector('.input');
        // 这里的e为事件本身event
        box1.onclick = function (e) {
            console.log('box1');
            console.log(e);
        }
        // keyCode表示输入字符的ASCII编码
        ipt.onkeyup = function (e) {
            var value = this.value;
            if (e.keyCode === 13) {
                alert('你输入了：' + value);
            }
        }
        box2.onclick = function (e) {
            console.log(e.pageX, e.pageY); // 表示鼠标点击点相对于页面的位置
            console.log(e.clientX, e.clientY); // 鼠标点击点相对于浏览器可视区域的位置
            console.log(e.screenX, e.screenY); // 鼠标点击位置相对于屏幕的位置
            console.log(e.offsetX, e.offsetY); // 鼠标点击位置相对于 事件触发对象的位置
            console.log(e.type); //事件类型S
        }
    </script>
</body>
</html>